<template>
  <div v-loading.fullscreen.lock="loading"
       element-loading-text="拼命加载中"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)">
    <!--三级分类-->
    <el-card style="margin: 10px">
      <!--change:当三级分类的任意一级发生改变时触发-->
      <!--disabled:禁用所有的三级分类-->
      <ClassSelector @change="selectorChange" :disabled="showAddOrUpdate || showAddSku"></ClassSelector>
    </el-card>

    <!--spu列表区域-->
    <el-card style="margin: 10px" v-show="!showAddOrUpdate && !showAddSku">
      <el-button type="primary" icon="el-icon-circle-plus" @click="toUpdateAndAdd({})"
                 style="margin-bottom: 10px" :disabled="!category3Id">添加SPU</el-button>
      <el-table :data="tableData" border>
        <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
        <el-table-column prop="spuName" label="SPU名称" width="250"  align="center"></el-table-column>
        <el-table-column prop="description" label="SPU描述"  align="center"></el-table-column>
        <el-table-column label="操作" width="300"  align="center">
          <template slot-scope="{row}">
            <TipButton content="添加SKU" placement="top" effect="light" @click="toAddSku(row)"
                       size="mini" type="primary" icon="el-icon-circle-plus"></TipButton>
            <TipButton content="修改SPU" placement="top" effect="light" @click="toUpdateAndAdd(row)"
                       size="mini" type="primary" icon="el-icon-edit"></TipButton>
            <TipButton content="查看SKU列表" placement="top" effect="light" @click="toSkuList(row)"
                       size="mini" type="info" icon="el-icon-info" style="margin-right:10px;"></TipButton>
            <el-popconfirm :title="`确定要删除${row.spuName}吗？`" @onConfirm="delSpu(row.id)">
              <TipButton content="删除SPU" placement="top" effect="light"
                         size="mini" type="danger" icon="el-icon-delete" slot="reference">
              </TipButton>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <el-pagination
        style="text-align: center;width: 95%;margin-top: 10px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentPageChange"
        :current-page="currentPage"
        :page-sizes="[2, 4, 6,8]"
        :page-size="pageSize"
        layout=" prev, pager, next, jumper,->,total, sizes"
        :total="total">
      </el-pagination>
    </el-card>

    <!--spu新增&修改区域-->
    <addOrUpdate :visible.sync="showAddOrUpdate" @success="success" ref="addOrUpdate"></addOrUpdate>
    <!--<addOrUpdate :visible="showList" @update:visible="showList=$event"></addOrUpdate>-->

    <!--sku列表区域-->
    <el-dialog  :title="title" :visible.sync="showSkuList" width="70%" center>
      <el-table :data="skuList" v-loading.lock="skuLoading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading">
        <el-table-column label="名称" prop="skuName"></el-table-column>
        <el-table-column label="价格(元)" prop="price"></el-table-column>
        <el-table-column label="重量(KG)" prop="weight"></el-table-column>
        <el-table-column label="默认图片">
          <template slot-scope="{row}">
            <img :src="row.skuDefaultImg" width="80">
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!--sku新增区域-->
    <addSku :visible.sync="showAddSku"  ref="addSku"></addSku>
  </div>
</template>

<script>
  import addOrUpdate from "./addOrUpdate"
  import addSku from "./addSku"
  export default {
    name: "spu",
    data(){
      return {
        tableData:[], //spu列表
        category1Id:2,
        category2Id:13,
        category3Id:61,

        pageSize:4,//每页显示数量
        currentPage:1,//当前页
        total:0,//总数量
        loading:false, //查询操作时的loading效果

        //showList:true, //是否要展示SPU列表界面
        showSkuList:false, //是否要展示SKU列表界面
        title:"", //SKU列表界面的提示

        skuList:[], //sku列表
        skuLoading:false, // 查询sku列表操作时的loading效果
        showAddOrUpdate:false, //是否要展示SPU新增修改界面
        showAddSku:false //是否要展示SKU新增界面
      }
    },
    methods:{
      //显示sku新增界面
      toAddSku(row){
        //row:spu信息
        this.$refs.addSku.initData({
          ...row,
          category1Id:this.category1Id,
          category2Id:this.category2Id,
          category3Id:this.category3Id,
        });
        //显示sku新增界面
        this.showAddSku=true
      },

      //显示sku列表界面
      async toSkuList(row){
        this.skuLoading = true;
        //显示sku列表界面
        this.showSkuList = true
        //设置
        this.title=`${row.spuName}的商品列表`
        //获取sku列表
        const {code,data} = await this.$api.product.sku.getSKUList(row.id);
        if(code === 200){
          this.skuList = data;
        }
        this.skuLoading = false
      },

      //删除spu
      async delSpu(spuId){
        const {code} = await this.$api.product.spu.deleteSpu(spuId);
        if(code === 200){
          // 刷新界面
          await this.getSPUList()
        }
      },

      //显示新增修改的共用界面
      toUpdateAndAdd(row={}){
        /*
          row:
            category3Id: 61,                    spu所处的三级分类
            description: "Apple iPhone 12",     spu的描述
            id: 3,                              spu的标识id
            spuImageList: null,                 spu的图片列表 但是分页时没有返回
            spuName: "Apple iPhone 12"          spu的名称
            spuSaleAttrList: null               spu的销售属性列表 但是分页时没有返回
            tmId: 2                             spu的品牌id
        */
        //数据回显
        this.$refs.addOrUpdate.initData(row,this.category3Id)
        //跳转到新增和修改共用的界面
        this.showAddOrUpdate=true
      },

      //修改成功的回调
      async success(){
        //刷新列表界面
        await this.getSPUList()
      },

      //分页每页显示的数量生产变化时触发
      async handleSizeChange(pageSize){
        //回到第一页
        this.currentPage=1;
        this.pageSize=pageSize;
        await this.getSPUList();
      },
      //分页当前页发生变化时触发
      async handleCurrentPageChange(currentPage){
        this.currentPage=currentPage;
        await this.getSPUList();
      },

      //当三级分类的任意一级发生改变时触发
      async selectorChange({class:type,classId}){
        //type : 哪一级分类产生了改变
        //classId : 产生改变的分类的具体id
        switch (type) {
          case 1:
            this.category1Id = classId;
            //清空其他数据
            this.category2Id=""
            this.category3Id=""
            this.tableData=[]
            break;
          case 2:
            this.category2Id = classId;
            //清空其他数据
            this.category3Id=""
            this.tableData=[]
            break;
          case 3:
            this.category3Id = classId;
            //当第三级分类产生改变时 要发送请求获取基础属性信息
            await this.getSPUList()
            break;
        }
      },

      //获取spu列表
      async getSPUList(){
        this.loading = true;
        const {code,data:{records,total}} = await this.$api.product.spu.
              getSPUList({ page:this.currentPage,limit:this.pageSize,category3Id:this.category3Id});
        if(code === 200){
          this.tableData = records;
          this.total = total;
        }
        this.loading = false;
      }
    },
    components:{
      addOrUpdate,
      addSku
    },
    async mounted() {
      await this.getSPUList()
    }
  }
</script>

<style scoped>
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
